<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>配置属性管理</title>
	<script>document.write('<script src="../../plugin/vue/js/import.js?' + Math.random() + '"><' + '/script>');</script>
    <script>_import("../../plugin/vue/js/before.js");</script>
</head>
<body>
	<div id="app" class="container" v-cloak>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="el-icon-document mr5"></i>配置属性管理</h3>
            </div>
            <div class="panel-body">   
                <el-card class="box-card mb10 w-boxcard" shadow="never">
                  <div slot="header" class="clearfix">
                    <span class="f16 lh38">查询条件</span>    
                    <el-button class="pull-right" style="margin-left:10px" type="primary"  @click="delFile">删除</el-button>
                    <el-button class="pull-right" type="primary" @Click="search">查询</el-button>  
                  </div>                                       
                <el-form  label-width="86px">              
                 <el-row :gutter="20">
                	<el-col span="8">
                		<el-form-item label="文件名:">
                			<el-select v-model="pfile" placeholder="请选择" @Change="search">
							    <el-option
							      v-for="item in pfiles"
							      :key="item.label"
							      :label="item.label"
							      :value="item.label">
							    </el-option>
  							</el-select>
  						</el-form-item>
                	</el-col>
                </el-row>
               	</el-form>
                </el-card> 
                <el-row :gutter="20">                    
                    <!-- box -->
                    <el-col :span="24">
                        <div class="grid-content">
                            <el-row class="tr mb3">
                            	<el-button type="primary"  @click="newProp">添加</el-button> 
                            </el-row>
                             <el-table ref="propTable" :data="propData.slice((currentPageNbr-1)*pageSize,currentPageNbr*pageSize)" border style="width: 100%;" class="w-tablesub">
								<el-table-column  label="属性名称" class="w-textsub">
				                    <template slot-scope="scope">
				                        <el-popover trigger="hover" placement="top-start">
				                            <p class="w-tablepop" >{{ scope.row.name }}</p>
				                            <div slot="reference">
				                               	 {{ scope.row.name }}			                               
				                            </div>		                           
				                        </el-popover>
				                    </template>
                				</el-table-column>
                				<el-table-column label="属性值">
                					<template slot-scope="scope">
					        			<div style="float: left; width: 85%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
				 						 margin-top: 5px; line-height:20px;">{{scope.row.value}}</div>
					        			<el-popover placement="right" width="300" trigger="click" @hide="psave(scope.row)" @show="noteval(scope.row)">
						           		  <el-input type="textarea" :rows="4" v-model="scope.row.value"></el-input>
						            	  <i style="position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border: solid 1px #888;
				  							 border-radius: 50%; cursor: pointer;" class="el-icon-close" @click="closePopup"></i>
						           	      <el-button slot="reference" title="编辑" size="mini"><i class="el-icon-edit" ref="btn"></i></el-button>
						            	</el-popover>
	        						</template>
                                </el-table-column>                             
                                <el-table-column label="操作">
                                     <template slot-scope="scope">
                                     	<span style="font-size:18px">
                                     		<i class="el-icon-delete" title="删除" @click="delProp(scope.row)" style="cursor:pointer;"></i>
                                     	</span>
                                     </template>
                                </el-table-column>    
                                
		                  	</el-table> 
                            
                            <div class="block mt10">
                                <el-pagination @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPageNbr" :page-sizes="pageSizes"
                                    :page-size="pageSize" class="w-tc"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="totalRecords"> </el-pagination>
                            </div>
                        </div>
                    </el-col>
                    
                </el-row>
            </div>
        </div>    
        <el-dialog
		  title="属性添加"
		  :visible.sync="showDg"
		  width="30%">
			  <el-form  label-width="86px">              
                 <el-row :gutter="20">
                	<el-col span="8">
                		<el-form-item label="属性名:">
                			<el-input v-model="form.name" placeholder="请输入内容"></el-input>
  						</el-form-item>
                	</el-col>
                </el-row>
                <el-row>
                	<el-col span="8">
                		<el-form-item label="属性值:">
                			<el-input v-model="form.value" placeholder="请输入内容"></el-input>
  						</el-form-item>
                	</el-col>
                </el-row>
               	</el-form>
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="close">取 消</el-button>
			    <el-button type="primary" @click="padd">确 定</el-button>
			  </span>
		</el-dialog>
        
    </div>
<script>
    _import("../../plugin/vue/js/after.js");
</script> 
<script>
    _import("js/proplist.js");
</script>
</body>
</html>